<script setup lang="ts">
import type { TableChangeExtra, TableData } from '@arco-design/web-vue'
import { Message } from '@arco-design/web-vue'
import { pick } from 'lodash-es'
import {
  getManageRegionsListApi,
  updateManageRegionByIdApi,
  updateManageRegionsIndexApi,
  updateManageRegionStatusByIdApi,
} from '@/apis/modules/regions'
import EditRegionDialog from './dialogs/EditRegionDialog.vue'
import useConfig from './useConfig'

const { tableColumns, filterSchemes } = useConfig()

type Region = ApiListItem<typeof getManageRegionsListApi>

const queryParams = ref({ status: 0 })

const {
  data: tableData,
  loading,
  run: getList,
} = useListRequest(getManageRegionsListApi, {
  params: queryParams,
  immediate: true,
})

async function handleTableChange(data: TableData[], extra: TableChangeExtra) {
  if (extra.type !== 'drag') {
    return
  }
  const { dragTarget } = extra
  const index = data.findIndex(item => item.id === dragTarget.id)

  await updateManageRegionsIndexApi({ id: dragTarget.id, index: index + 1 })
  await getList()
  Message.success('操作成功')
}

// 修改状态
const handleToggleStatus = useConfirm<string>(
  {
    title: '禁用区域',
    content: '确定要禁用区域吗？',
    okText: '禁用',
    width: 480,
    closable: false,
    immediate: (id, status: E_SWITCH_STATUS) =>
      status === E_SWITCH_STATUS.ENABLE,
  },
  async (id, status: E_SWITCH_STATUS) => {
    await updateManageRegionStatusByIdApi({ id, status: status as any })
    await getList()
    Message.success('操作成功')
  },
)

// 编辑备注
async function handleSubmitRemark(data: any) {
  await updateManageRegionByIdApi(
    pick(data, [
      'id',
      'name',
      'region',
      'region_url',
      'user_name',
      'password',
      'remark',
      'status',
      'country',
    ]),
  )
  await getList()
  Message.success('修改成功')
}

const {
  visible: editDialogVisible,
  data: editDialogData,
  open: openEditDialog,
} = usePopup<Region>()
</script>

<template>
  <main-container
    :loading="loading"
    :show-pagination="false"
    @run="getList"
  >
    <template #header>
      <div class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditDialog()"
        >
          新建区域
        </a-button>
        <a-select
          v-model="queryParams.status"
          placeholder="全部状态"
          :options="[{ label: '全部状态', value: 0 }, ...switchStatusOptions]"
          class="w-34!"
          @change="() => getList"
        />
        <multiple-condition-search
          v-model="queryParams"
          :schema="filterSchemes"
          @search="getList"
        />
      </div>
    </template>

    <a-table
      v-bind="draggableTableProps"
      :data="tableData"
      :columns="tableColumns"
      @change="handleTableChange"
    >
      <template #remark="{ record }">
        <edit-field
          edit-title="编辑备注"
          hover-table
          field="remark"
          placeholder="请输入备注"
          :max-length="20"
          :params="record"
          :required="false"
          :default-value="record.remark"
          :fn="handleSubmitRemark"
        >
          {{ record.remark || '-' }}
        </edit-field>
      </template>

      <template #status="{ record }">
        <a-switch
          :model-value="Number(record.status)"
          size="small"
          :checked-value="E_SWITCH_STATUS.ENABLE"
          :unchecked-value="E_SWITCH_STATUS.DISABLE"
          :before-change="val => handleToggleStatus(record.id, val as number)"
        />
      </template>

      <template #actions="{ record }">
        <a-link @click="openEditDialog(record)">
          <i-icons-edit size="16px" />
        </a-link>
      </template>
    </a-table>
  </main-container>

  <edit-region-dialog
    v-model="editDialogVisible"
    :record="editDialogData"
    @refresh="getList"
  />
</template>

<style scoped></style>
